<template>
  <div id="cesiumContainer">
  </div> 
</template>

<script setup lang=ts>
import { onMounted ,getCurrentInstance } from 'vue';

const { appContext }:any = getCurrentInstance();
let global = appContext.config.globalProperties;


onMounted(()=>{
  setMap()
})

const setMap = () => {
  // const cesiumTerrainProvider = new Cesium.CesiumTerrainProvider({
  //   url: 'http://123.249.117.7:9066/tile/terrain/terrain_proxy/getTile',
  //   type: "xyz",
  // });

    let viewer = new Cesium.Viewer("cesiumContainer", {
      // terrainProvider: cesiumTerrainProvider,
        contextOptions: {
          webgl: {
              //通过canvas.toDataURL()实现截图需要将该项设置为true
              preserveDrawingBuffer:true
          }
        },

        useBrowserRecommendedResolution: true,
        selectionIndicator: false,
        animation: false, //是否显示动画控件
        baseLayerPicker: false, //是否显示图层选择控件
        geocoder: false, //是否显示地名查找控件
        timeline: false, //是否显示时间线控件
        sceneModePicker: false, //是否显示投影方式控件
        navigationHelpButton: false, //是否显示帮助信息控件
        infoBox: false, //是否显示点击要素之后显示的信息
        imageryProvider: false,
        fullscreenButton: false,
        shouldAnimate: true,
        requestRenderMode: true,
        homeButton:false
    });

    
    viewer.scene.globe.depthTestAgainstTerrain = false;
    viewer.scene.primitives.destroyPrimitives = false;
    viewer.scene.postProcessStages._fxaa.enabled = true;
    viewer.scene.screenSpaceCameraController.enableCollisionDetection = true;


    global.$viewer = viewer
    
    const imageLayer = new Cesium.ImageryLayer(
        new Cesium.WebMapTileServiceImageryProvider({
          show: true,
          url: window.mapProxyImageServer,
          layer: "tdtImg_c",
          style: "default",
          format: "tiles",
          tileMatrixSetID: "c",
          subdomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"],
          tilingScheme: new Cesium.GeographicTilingScheme(),
          tileMatrixLabels: [
            "1",
            "2",
            "3",
            "4",
            "5",
            "6",
            "7",
            "8",
            "9",
            "10",
            "11",
            "12",
            "13",
            "14",
            "15",
            "16",
            "17",
            "18",
            "19",
          ],
          maximumLevel: 17,
        })
      );

    viewer.imageryLayers.add(imageLayer);

  }
</script>

<style lang='less'>

  #cesiumContainer {
    position: relative;
    top: 0;
    left: 0;
    width:100%;
    height: 100%;
    transform-origin: top left;
    .cesium-viewer-bottom {
      display: none;
    }
  }


</style>